<template>
  <view class="container">
	<view class="addStore">
		<view class="addStore-list">
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">任务名称:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入任务名称" border="none" v-model="detailList.tarkName" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="isShowArea=true">
				<view class="addStore-list-item-leftContent">紧急状态</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="detailList.isUrgent!=null">
						{{Number(detailList.isUrgent)==1 ? '紧急' : '非紧急'}}
					</view>
					<view v-if="detailList.isUrgent==null">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="detailList.isUrgent==null">
						请选择紧急状态
					</view>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="showGoodsList=true" v-if="detailList.isUrgent!=null && detailList.isUrgent==0">
				<view class="addStore-list-item-leftContent">货品列表</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="detailList.baseMatList">
						{{detailList.baseMatList ? '已选择' : ''}}
					</view>
					<view v-if="!detailList.baseMatList">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!detailList.baseMatList">
						点此选择货品
					</view>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="showleadership=true">
				<view class="addStore-list-item-leftContent">发放领导</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="detailList.UsernickName">
						{{detailList.UsernickName}}
					</view>
					<view v-if="!detailList.UsernickName">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!detailList.UsernickName">
						点此选择发放领导
					</view>
				</view>
			</view>
		</view>
		<view class="footerBtn"  @click="confirmInfo">
			提交
		</view>
		<u-picker :show="isShowArea" :columns="dropdownList" :defaultIndex="[0]" :immediateChange="true" keyName="name" ref="uPicker" @cancel="isShowArea=false" @confirm="changeStatus"></u-picker>
	</view>
	<u-picker :show="showleadership" :columns="leadershipList" :defaultIndex="[0]" :immediateChange="true" keyName="nickName" ref="uPicker" @cancel="showleadership=false" @confirm="changeStatus1"></u-picker>
	<u-popup :show="showGoodsList" round="12" mode="center" @close="showGoodsList=false">
		<view style="width:690rpx;max-height:800rpx;padding:40rpx;box-sizing: border-box;overflow: auto;">
			 <u-checkbox-group
			            v-model="checkboxValue1"
			            placement="column"
			            @change="checkboxChange"
			        >
			<view style="display: flex;align-items: center;margin-top:12rpx;" v-for="(item, index) in checkboxList1">
				<view style="width:55%">
					<u-checkbox :label="item.matName" :name="index"></u-checkbox>
				</view>
				<view style="width:240rpx;;margin-left:30rpx;">
					<u--input placeholder="点击输入数量" v-model="item.num" type="number" inputAlign="left" @change="changInput($event,item,index)"></u--input>
				</view>
			</view> </u-checkbox-group>
			<view class="footerBtn" style="width:300rpx;margin-bottom:40rpx;" @click="comfirmProduct">
				确认
			</view>
		</view>
	</u-popup>
	<u-loading-page :loading="isShowLoading" bg-color="rgba(4,4,15,0.4000)">加载中...</u-loading-page>
  </view>
</template>
<script>
	import { insertDistributeTasks,getDistributeTasksProduct } from "@/api/otherTaskApi.js";
	export default {
		data() {
			return {
				isShowArea:false,
				showleadership:false,
				dropdownList:[[
					{name:'非紧急',isUrgent:0},
					{name:'紧急',isUrgent:1}
				]],
				leadershipList:[],
				name:null,
				goodsList:[],
				showGoodsList:false,
				checkboxValue1:[],
				// 基本案列数据
				checkboxList1: [
					{name: '货品1',id:1,disabled: false},
					{name: '货品2',id:2,disabled: false},
					{name: '货品3',id:3,disabled: false},
					{name: '货品4',id:1,disabled: false}
				],
				value:null,
				isShowLoading:false,
				detailList:{
					tarkName:null,
					tarkType:1,
					isUrgent:null,
					baseMatList:null,
					userId:null,
					UsernickName:null
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getDistributeTasksProduct();
		},
		methods: {
			changeStatus(e){
				this.detailList.isUrgent = e.value[0].isUrgent;
				this.isShowArea = false;
			},
			changeStatus1(e){
				this.detailList.userId = e.value[0].userId;
				this.detailList.UsernickName = e.value[0].nickName;
				this.showleadership = false;
			},
			async confirmInfo(){
				let data;
				if(this.detailList.isUrgent==0){
					data = {
						tarkName:this.detailList.tarkName,
						tarkType:1,
						isUrgent:0,
						baseMatList:this.detailList.baseMatList,
						userId:this.detailList.userId
					}
				}else{
					data = {
						tarkName:this.detailList.tarkName,
						tarkType:1,
						isUrgent:1,
						userId:this.detailList.userId
					}
				}
				let res = await insertDistributeTasks(data);
				if(res.code==200){
					uni.showToast({ title:'提交成功', icon: 'none' })
					this.detailList = {
						tarkName:null,
						tarkType:1,
						isUrgent:null,
						baseMatList:null,
						userId:null,
						UsernickName:null
					}
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			async getDistributeTasksProduct(){
				this.isShowLoading = true;
				let res = await getDistributeTasksProduct();
				if(res.code==200){
					this.checkboxList1 = res.data.baseMatList;
					this.leadershipList.push(res.data.personList);
					this.isShowLoading = false;
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			checkboxChange(e) {
				console.log('change',e);
			},
			changInput(e,item,index){
				if(e.trim()){
					if(Number(item.safetyStock)<e){
						uni.showToast({ title: '当前库存最多只有'+Number(item.safetyStock), icon: 'none' })
						let str = this.checkboxList1;
						str[index].num = Number(item.safetyStock);
						this.checkboxList1 = str;
					}
				}
			},
			comfirmProduct(){
				this.detailList.baseMatList = this.checkboxValue1.map(index => this.checkboxList1[index])
				this.showGoodsList = false;
			}
		}
	}
</script>

<style lang="scss">
	.addStore{
		&-list{
			width:100%;
			margin-top:40rpx;
			&-item{
				width: 100%;
				height:88rpx;
				margin:0 auto;
				padding:0 30rpx;
				box-sizing: border-box;
				border-top:2rpx solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-leftContent{
					font-size: 30rpx;
					font-weight: 600;
					width:40%;
				}
				&-input{
					flex:1;
					text-align: right;
					color:#cccfd6;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
				}
			}
			
		}
	}
	.footerBtn{
		width:580rpx;
		margin:0 auto;
		padding:15rpx 0;
		background: #478cbd;
		text-align: center;
		color: white;
		border-radius: 50rpx;
		margin-top:70rpx;
		margin-bottom:180rpx;
	}
</style>
